<template>
  <div>
    <div class="search-con search-con-top">
      订单编号：
      <Input v-model="searchData.order_sn" style="width: 150px" clearable></Input>
      订单名称：
      <Input v-model="searchData.order_name" style="width: 150px" clearable></Input>
      <!-- 客户手机号：
      <Input v-model="searchData.mobile" style="width: 150px" clearable></Input> -->
      发票：
      <Select v-model="searchData.is_open" style="width: 150px" filterable clearable>
        <Option value="0">未开票</Option>
        <Option value="1">已开票</Option>
      </Select>
      退款：
      <Select v-model="searchData.is_refund" style="width: 150px" filterable clearable>
        <Option value="0">退款中</Option>
        <Option value="1">已退款</Option>
      </Select>
      待收款返还：
      <Select v-model="searchData.due_is_refund" style="width: 150px" filterable clearable>
        <Option value="0">未返还</Option>
        <Option value="1">已返还</Option>
      </Select>
      尾款：
      <Select v-model="searchData.residue_amount" style="width: 150px" filterable clearable>
        <Option value="0">未收</Option>
        <Option value="1">已收</Option>
      </Select>
      <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px">搜索</Button>
      <Button @click="reset" style="margin-left: 10px">重置</Button>
    </div>
    <br />
    <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800" stripe
      border size="small">
      <template slot-scope="{ row, index }" slot="memberSlot">
        <Tooltip content="详情" style="margin-left: 10px" placement="top">
          <Icon type="md-bulb" size="26" color="#19be6b" style="cursor: pointer" @click="shopDetail(row)" />
        </Tooltip>
        <Tooltip content="退款" style="margin-left: 10px" placement="top">
          <Icon type="ios-undo" size="26" color="red" style="cursor: pointer" @click="showOrderRefundModal(row.id, 0)" />
        </Tooltip>
        <Tooltip content="待收款返还" style="margin-left: 10px" placement="top">
          <Icon type="logo-yen" size="26" color="#ff9900" style="cursor: pointer"
            @click="showOrderRefundModal(row.id, 1)" />
        </Tooltip>
        <Tooltip content="上传发票" style="margin-left: 10px" placement="top">
          <Icon type="md-cloud-upload" size="26" color="#2d8cf0" style="cursor: pointer"
            @click="showOrderRefundModal(row.id, 2)" />
        </Tooltip>
        <Tooltip content="已收尾款" style="margin-left: 10px" placement="top" v-if="row.is_take == 0">
          <Icon type="logo-linkedin" size="26" color="#000000" style="cursor: pointer" @click="payment(row.id)" />
        </Tooltip>
      </template>
    </Table>
    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
    </Paginate>

    <!-- 订单详情 -->
    <Drawer title="详情" :closable="false" width="60" v-model="showDrawer">
      <List header="" footer="" size="small">
        <ListItem>订单编号：{{ orderInfo.order_sn }}</ListItem>
        <ListItem>支付金额：{{ orderInfo.order_amount }}</ListItem>
        <ListItem>待收款：{{ orderInfo.due_in_amount }}</ListItem>
        <ListItem>设计需求：{{ orderInfo.design_need }}</ListItem>
        <ListItem>
          需求文档：<span v-for="item in orderInfo.design_need_file_arr" style="margin-left: 10px;">
            <a :href="item.src">下载文件</a>
          </span>
        </ListItem>
        <ListItem>补充需求：{{ orderInfo.replenish_need }}</ListItem>
        <ListItem>
          补充文档：<span v-for="item in orderInfo.replenish_need_file_arr" style="margin-left: 10px;">
            <a :href="item.src">下载文件</a>
          </span>
        </ListItem>

        <ListItem>销售：{{ orderInfo.sale_name }}</ListItem>
        <ListItem>开票对应公司：{{ orderInfo.invoice_company }}</ListItem>
        <ListItem>开票金额：{{ orderInfo.invoice_amount }}</ListItem>
        <ListItem>开票公司信息：{{ orderInfo.invoice_company_info }}</ListItem>
        <ListItem>开票人姓名：{{ orderInfo.invoice_name }}</ListItem>
        <ListItem>税号：{{ orderInfo.invoice_no }}</ListItem>
        <ListItem>注册地址：{{ orderInfo.invoice_address }}</ListItem>
        <ListItem>联系电话:{{ orderInfo.invoice_tel }}</ListItem>
        <ListItem>开户行：{{ orderInfo.invoice_bank }}</ListItem>
        <ListItem>开户行行号：{{ orderInfo.invoice_bank_code }}</ListItem>
        <ListItem>银行账号：{{ orderInfo.invoice_bank_card }}</ListItem>
        <ListItem>待收款返还金额：{{
          orderInfo.due_in_refund == 1 ? orderInfo.refund_amount : 0
        }}</ListItem>
        <ListItem>备注：{{ orderInfo.remark }}</ListItem>
        <ListItem>尾款：{{ orderInfo.residue_amount }}</ListItem>
        <ListItem>是否加急：{{ orderInfo.is_urgent == 0 ? "否" : "是" }}</ListItem>
        <ListItem v-if="orderInfo.return_path">待收款返还方式：{{
          orderInfo.return_path == 1
          ? "银行卡"
          : orderInfo.return_path == 2
            ? "收款码"
            : "原路返回"
        }}</ListItem>
        <ListItem v-if="orderInfo.return_path == 1">银行卡号:{{ orderInfo.return_bank_card }}</ListItem>
        <ListItem v-if="orderInfo.return_path == 1">银行卡账户名:{{ orderInfo.return_bank_card_name }}</ListItem>
        <ListItem v-if="orderInfo.return_path == 2"><img :src="orderInfo.return_bay_code" style="width: 400px" />
        </ListItem>

        <ListItem v-if="orderInfo.due_refund_voucher">待收款返还凭证：<a :href="orderInfo.due_refund_voucher">下载</a></ListItem>
        <ListItem v-if="orderInfo.refund_voucher">退款凭证：<a :href="orderInfo.refund_voucher">下载</a>
          /></ListItem>
        <ListItem v-if="orderInfo.invoice_img">发票：<a :href="orderInfo.invoice_img">下载</a>
        </ListItem>
      </List>
    </Drawer>

    <!-- 添加订单 -->
    <Modal title="文件上传" width="35" v-model="OrderRefundModal" @on-ok="orderRefund">
      <Form ref="formValidate" :model="orderItem" :label-width="70">
        <FormItem :label="orderItem.type == 0
          ? '退款凭证'
          : orderItem.type == 1
            ? '返还凭证'
            : '上传发票'
          ">
          <Upload ref="upload1" name="file" :show-upload-list="false" :on-success="handleSuccess"
            :on-format-error="handleFormatError" :action="action_url" style="display: inline-block" :headers="headers">
            <Button icon="ios-cloud-upload-outline">上传文件</Button>
          </Upload>
          <div v-if="file !== null">文件名称: {{ file.name }}</div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import PdfViewer from './PdfViewer.vue';
import config from "@/config";
import { getToken } from "../../libs/util";
import Paginate from "@/components/paginate/paginate.vue";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
const baseImgeUrl =
  process.env.NODE_ENV === "development"
    ? config.baseImgUrl.dev
    : config.baseImgUrl.pro;
export default {
  name: "techWithdrawList",
  components: {
    Paginate,
    PdfViewer
  },
  data() {
    return {
      baseUrl: baseUrl,
      action_url: baseUrl + "/admin/image/uploadImg",
      headers: {
        Authorization: getToken(),
      },
      baseImgeUrl: baseImgeUrl,
      // 列表
      columns: [
        {
          title: "订单编号",
          align: "center",
          key: "order_sn",
        },
        {
          title: "订单名称",
          align: "center",
          key: "order_name",
        },

        {
          title: "支付金额",
          align: "center",
          key: "order_amount",
          maxWidth: 110,
          tooltip: true,
        },
        {
          title: "代收款",
          align: "center",
          key: "due_in_amount",
          maxWidth: 110,
          tooltip: true,
        },
        {
          title: "返还金额",
          align: "center",
          key: "refund_amount",
          maxWidth: 110,
          tooltip: true,
        },
        {
          title: "尾款",
          align: "center",
          key: "residue_amount",
          maxWidth: 110,
          tooltip: true,
        },

        {
          title: "订单状态",
          align: "center",
          key: "order_status_txt",
          maxWidth: 110,
          tooltip: true,
        },

        {
          title: "创建时间",
          align: "center",
          key: "create_time",
          maxWidth: 150,
          tooltip: true,
        },
        {
          title: "操作",
          align: "center",
          key: "make",
          slot: "memberSlot",
          maxWidth: 220,
          tooltip: true,
        },
      ],
      // 数据
      list: [],
      total: 0,
      searchData: {
        page: 1,
        limit: 10,
      },
      showDrawer: false,
      orderInfo: {},
      orderStatusList: [],
      // 退款
      OrderRefundModal: false,
      orderItem: {
        id: 0,
        type: "0",
      },
      file: null,
    };
  },
  methods: {
    getList() {
      this.$axios("/admin/order/getList", this.searchData).then((res) => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    customSort(column, key, order) {
      this.searchData.order_by = column.key;
      this.searchData.sort = column.order;
      this.getList();
    },
    shopDetail(row) {
      this.$axios("/admin/order/getOrderInfo", { id: row.id }).then((res) => {
        this.orderInfo = res;
      });
      this.showDrawer = true;
    },
    getOrderStatusArr() {
      this.$axios("/admin/order/getOrderStatusArr").then((res) => {
        this.orderStatusList = res;
      });
    },
    handleSuccess(res, file) {
      if (res.data == 0) {
        this.$Message.error(res.msg);
        return;
      }
      this.file = file;
      this.$set(this.orderItem, "file", res.data.src);
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式错误",
        desc: "不支持该文件类型",
      });
    },
    // 退款
    showOrderRefundModal(id, type) {
      this.orderItem.id = id;
      this.orderItem.type = type;
      this.orderItem.file = "";
      this.file = null;
      this.OrderRefundModal = true;
    },
    orderRefund() {
      this.$axios("/admin/order/uploadVoucher", this.orderItem).then((res) => {
        this.OrderRefundModal = false;
        this.getList();
      });
    },
    payment(id) {
      this.$Modal.confirm({
        title: "尾款",
        content: "您确定该订单尾款已收吗？",
        onOk: () => {
          this.$axios("/admin/order/collection", { id: id }).then((res) => {
            this.$Message.success("执行成功");
            this.getList();
          });
        },
        onCancel: () => {
          this.$Message.info("取消操作");
        },
      });
    },
  },
  created() {
    this.getOrderStatusArr();
    this.getList();
  },
};
</script>
